import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import MyTitle from './components/MyTitle.vue'
import { basicSetup } from 'codemirror'
import VueCodemirror from 'vue-codemirror'
import MyBlock from './components/MyBlock.vue'
import MyCodeViewer from './components/MyCodeViewer.vue'
import MyImg from './components/MyImg.vue'
var app: any = createApp(App)
app.component('my-title',MyTitle).component('my-block',MyBlock).component('my-code-viewer',MyCodeViewer).component('my-img',MyImg)
    .use(router)
    .use(store)
    .use(VueCodemirror, {
        // optional default global options
        autofocus: true,
        disabled: false,
        indentWithTab: true,
        tabSize: 2,
        placeholder: 'Code goes here...',
        extensions: [basicSetup]
        // ...
      })
    .mount('#app')

//路由守卫
router.beforeEach((to, from) => {
  // ...
  
  to.meta?document.getElementsByTagName("title")[0].innerHTML = `${to.meta.name} | Learn Vue3`:null;
  if (to.path === '/routeguard'){
    console.log('beforeEach...')
    console.log('to:',to)
  }

  // 返回 false 以取消导航
  // return false
})
router.beforeResolve( to => {
  if (to.path === '/routeguard')
    console.log('beforeResolve...')
})
router.afterEach((to, from, failure) => {
  if (!failure && to.path === '/routeguard') 
    console.log('afterEach...')
})